<template>
  <div id="app">
    <ul class="order">
      <li :class="{'active':isActive}" @click="_orderList">预订订单</li>
      <li :class="{'active':!isActive}" @click="_orderList">历史订单</li>
    </ul>
    <div class="balance">
      <p><span>可用余额</span><span>总预付款</span><span>货值增减</span></p>
      <p><span class="redColor">100000.00</span><span class="redColor">22000.00</span><span class="redColor">+507.00 / -507.00</span></p>
    </div>
    <div class="order-list">
      <h1><em class="baseColor">预购中</em> <span class="fr">订单号：5147896534kie6587964</span></h1>
      <div class="order-list-box">
        <div>
          <img src="https://photo.kkgold.com/photoserver/images/3/2018/12/19/fd86b6e2-6285-47f2-ab98-b9c4c09c0908.jpg" alt="">
        </div>
        <ul>
          <li>足金9999 发发金投资金条 5000克</li>
          <li>规格：<em class="redColor">5000g</em>  </li>
          <li><em class="redColor">¥270.00 / ¥271.13</em> <span class="fr">数量：x1</span></li>
          <li>货值增减：<em class="redColor">+500.00 / -500.00</em></li>
        </ul>
      </div>
      <div class="service">预付款：¥20000.00（含服务费）<a>退订</a><a>提货</a></div>
    </div>
    <div class="order-list">
      <h1><em class="baseColor">预购中</em> <span class="fr">订单号：5147896534kie6587964</span></h1>
      <div class="order-list-box">
        <div>
          <img src="https://photo.kkgold.com/photoserver/images/3/2018/12/19/fd86b6e2-6285-47f2-ab98-b9c4c09c0908.jpg" alt="">
        </div>
        <ul>
          <li>足金9999 发发金投资金条 5000克</li>
          <li>规格：<em class="redColor">5000g</em>  </li>
          <li><em class="redColor">¥270.00 / ¥271.13</em> <span class="fr">数量：x1</span></li>
          <li>货值增减：<em class="redColor">+500.00 / -500.00</em></li>
        </ul>
      </div>
      <div class="service">预付款：¥20000.00（含服务费）<a>退订</a><a>提货</a></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "assist",
    beforeCreate() {
      document.querySelector('body').setAttribute('style', 'background-color:#f3f3f3')
    },
    beforeDestroy() {
      document.querySelector('body').removeAttribute('style')
    },
    data(){
      return {
        isActive:true
      }
    },
   methods:{
     _orderList(){
       this.isActive = !this.isActive
     }
   }
  }
</script>

<style lang="less" scoped>
#app {
  .order {
    display: flex;
    li {
      flex: 1;
      text-align: center;
      font-size: 0.554rem;
      line-height: 1.92rem;
      background: #fff;
      &:last-child{
        border-left: 1px solid #dcdcdc;
      }
      &.active{
        color: #ff9500;
        border-bottom: 1px solid #ff9500;
      }
    }
  }
  .balance {
    padding: 0.5rem 0;
    border-top: 1px solid #dcdcdc;
    p {
      display: flex;
      &:nth-of-type(1){
        color: #737373;
        margin-bottom: 0.2rem;
      }
      span {
        flex: 1;
        text-align: center;
        font-size: 0.426rem;
      }
    }
  }
  .order-list {
    background: #fff;
    margin-bottom: 0.5rem;
    border-top: 1px solid #dcdcdc;
    h1 {
      line-height: 1.92rem;
      font-size: 0.512rem;
      font-weight: normal;
      padding: 0 0.5rem;
      border-bottom: 1px solid #dcdcdc;
      span {
        font-size: 0.426rem;
      }
    }
    .order-list-box {
      display: flex;
      padding-top: 0.4rem;
      border-bottom: 1px solid #dcdcdc;
      div {
        flex: 3;
        padding: 0.5rem;
      }
      ul {
        flex: 7;
        padding-right: 0.5rem;
        li {
          font-size: 0.469rem;
          line-height: 1.3rem;
          &:nth-of-type(1){
            font-size: 0.554rem;
          }
        }
      }
    }
  }
  .service {
    font-size: 0.469rem;
    padding: 0 0.5rem;
    line-height: 1.92rem;
    border-bottom: 1px solid #dcdcdc;
    a {
      float: right;
      width: 3rem;
      text-align: center;
      line-height: 1.17rem;
      border: 1px solid #ff9500;
      border-radius: 25px;
      margin:0.35rem 0 0 0.5rem;
      color: #ff9500;
    }
  }
}
</style>
